<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用户注册</title>
<meta name="keywords"
	content="DeathGhost,DeathGhost.cn,web前端设,移动WebApp开发" />
<meta name="description" content="DeathGhost.cn::H5 WEB前端设计开发!" />
<meta name="author" content="DeathGhost" />
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/public.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jqpublic.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-2.0.3.js"></script>
<!--
Author: DeathGhost
Author URI: http://www.deathghost.cn
-->
</head>
<body>
	<header>
		<section class="Topmenubg">
			<div class="Topnav">
				<div class="LeftNav">
					<a href="register.html">注册</a>/<a href="login.html">登录</a><a
						href="#">QQ客服</a><a href="#">微信客服</a><a href="#">手机客户端</a>
				</div>
				<div class="RightNav">
					<a href="user_center.html">用户中心</a> <a href="user_orderlist.html"
						target="_blank" title="我的订单">我的订单</a> <a href="cart.html">购物车（0）</a>
					<a href="user_favorites.html" target="_blank" title="我的收藏">我的收藏</a>
					<a href="#">商家入驻</a>
				</div>
			</div>
		</section>
		<div class="Logo_search">
			<div class="Logo">
				<img src="images/logo.jpg" title="DeathGhost" alt="模板"> <i></i>
				<span>西安市 [ <a href="#">莲湖区</a> ]
				</span>
			</div>
			<div class="Search">
				<form method="get" id="main_a_serach"
					onsubmit="return check_search(this)">
					<div class="Search_nav" id="selectsearch">
						<a href="javascript:;"
							onClick="selectsearch(this,'restaurant_name')" class="choose">餐厅</a>
						<a href="javascript:;" onClick="selectsearch(this,'food_name')">食物名</a>
					</div>
					<div class="Search_area">
						<input type="search" id="fkeyword" name="keyword"
							placeholder="请输入您所需查找的餐厅名称或食物名称..." class="searchbox" /> <input
							type="submit" class="searchbutton" value="搜 索" />
					</div>
				</form>
				<p class="hotkeywords">
					<a href="#" title="酸辣土豆丝">酸辣土豆丝</a><a href="#" title="这里是产品名称">螃蟹炒年糕</a><a
						href="#" title="这里是产品名称">牛奶炖蛋</a><a href="#" title="这里是产品名称">芝麻酱凉面</a><a
						href="#" title="这里是产品名称">滑蛋虾仁</a><a href="#" title="这里是产品名称">蒜汁茄子</a>
				</p>
			</div>
		</div>
		<nav class="menu_bg">
			<ul class="menu">
				<li><a href="index.html">首页</a></li>
				<li><a href="list.html">订餐</a></li>
				<li><a href="category.html">积分商城</a></li>
				<li><a href="article_read.html">关于我们</a></li>
			</ul>
		</nav>
	</header>
	<!--Start content-->
	<section class="Psection MT20">
		<form class="form-horizonta action=" role="form" action="UsersServlet"
			method="post" onsubmit="return check()">
			<table class="Register">
				<!-- 隐藏域-->
				<input type="hidden" name="op" value="usersRegister">
				<!-- 处理重复提交操作的一个 token 令牌，表单提交，令牌也提交 -->
				<%
					//[重复提交 ]. 在session范围内产生一个token的值。
					session.setAttribute("token", System.nanoTime() + "");
				%>
				<!-- [重复提交] 将token通过隐藏域传递给servlet -->
				<input type="hidden" name="token" value="${sessionScope.token}">

				<tr>
					<td width="40%" align="right" class="FontW">用户名：</td>
					<td><input type="text" name="username" id="username"
						required="required" autofocus placeholder="请输入用户名"> <span
						id="msg"></span></td>
				</tr>
				<tr>
					<td width="40%" align="right" class="FontW">密码：</td>
					<td><input type="password" name="userpsw" id="userpsw"
						required="required" placeholder="请输密码"></td>
				</tr>
				<tr>
					<td width="40%" align="right" class="FontW">确认密码：</td>
					<td><input type="password" name="conuserpsw" id="conuserpsw"
						required="required" placeholder="请再次输入密码"><span
						id="userpswmsg"></span></td>
					</td>
				</tr>
				<tr>
					<td width="40%" align="right" class="FontW">邮箱：</td>
					<td><input type="email" name="useremail" id="useremail"
						required="required" placeholder="请输入邮箱"></td>
				</tr>
				<tr>
					<td width="40%" align="right" class="FontW">手机号码：</td>
					<td><input type="text" name="userphone" id="userphone"
						required="required" pattern="[0-9]{11}" placeholder="请输入手机号码"><input
						id="btnSendCode1" type="button" class="btn btn-default"
						value="获取验证码" onClick="sendMessage1()"><span
						id="userphonemsg"></span></td>
				</tr>
				<tr>
					<td width="40%" align="right" class="FontW">手机校验码：</td>
					<td><input type="text" name="scode" id="scode" required
						pattern="[0-9]{6}" placeholder="请输入验证码"><span id="codemsg"></span></td>

				</tr>
				<tr>
					<td width="40%" align="right" class="FontW">地址：</td>
					<td><input type="text" name="useraddress" id="useraddress"
						required="required" placeholder="请输入地址"> <span id="msg"></span></td>
				</tr>
				<!--  <tr>
					<td width="40%" align="right" class="FontW">验证码：</td>
					<td><input type="text" name="" id="" required="required"
						placeholder="请输入验证码"><img src="upload/captcha.png"
						style="margin-left: 8px; vertical-align: bottom" width="83"
						height="36"></td>
				</tr>-->
				<tr>
					<td width="40%" align="right"></td>
					<td><input type="submit" name="" class="Submit_b" value="注 册">(
						已有账号，<a href="login.html" class="BlueA">请登录</a> )</td>
				</tr>

			</table>
			<div width="40%" align="center" class="FontW"><%=request.getAttribute("msg") == null ? "" : request.getAttribute("msg")%>
			</div>
		</form>
	</section>
	<!--End content-->
	<div class="F-link">
		<span>友情链接：</span> <a href="http://www.chd.edu.cn/" target="_blank"
			title="长安大学">长安大学</a> <a href="http://www.baidu.com/" target="_blank"
			title="百度">百度一下</a><a href="https://www.amap.com/" target="_blank"
			title="高德地图">高德地图</a>
	</div>
	<footer>
		<section class="Otherlink">
			<aside>
				<div class="ewm-left">
					<p>手机扫描二维码：</p>
					<img src="images/Android_ico_d.gif"> <img
						src="images/iphone_ico_d.gif">
				</div>
				<div class="tips">
					<p>客服热线</p>
					<p>
						<i>1830927**73</i>
					</p>
					<p>配送时间</p>
					<p>
						<time>09：00</time>
						~
						<time>22:00</time>
					</p>
					<p>网站公告</p>
				</div>
			</aside>
			<section>
				<div>
					<span><i class="i1"></i>配送支付</span>
					<ul>
						<li><a href="article_read.html" target="_blank" title="标题">支付方式</a></li>
						<li><a href="article_read.html" target="_blank" title="标题">配送方式</a></li>
						<li><a href="article_read.html" target="_blank" title="标题">配送效率</a></li>
						<li><a href="article_read.html" target="_blank" title="标题">服务费用</a></li>
					</ul>
				</div>
				<div>
					<span><i class="i2"></i>关于我们</span>
					<ul>
						<li><a href="article_read.html" target="_blank" title="标题">招贤纳士</a></li>
						<li><a href="article_read.html" target="_blank" title="标题">网站介绍</a></li>
						<li><a href="article_read.html" target="_blank" title="标题">配送效率</a></li>
						<li><a href="article_read.html" target="_blank" title="标题">商家加盟</a></li>
					</ul>
				</div>
				<div>
					<span><i class="i3"></i>帮助中心</span>
					<ul>
						<li><a href="article_read.html" target="_blank" title="标题">服务内容</a></li>
						<li><a href="article_read.html" target="_blank" title="标题">服务介绍</a></li>
						<li><a href="article_read.html" target="_blank" title="标题">常见问题</a></li>
						<li><a href="article_read.html" target="_blank" title="标题">网站地图</a></li>
					</ul>
				</div>
			</section>
		</section>
		<div class="copyright">
			© 版权所有 2020 与食俱进 技术支持：<a href="http://www.deathghost.cn"
				title="DeathGhost">与食俱进</a>
		</div>
	</footer>
	<script>
		/*********用户名重复验证*********/
		//标记一下ajaxName函数是否有执行
		var msg = "";
		var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/;// 手机号正则
		var count = 60; // 间隔函数，1秒执行
		var InterValObj1; // timer变量，控制时间
		var curCount1;// 当前剩余秒数
		var scode = null;
		var flag1 = false;
		var flag2 = false;
		var flag3 = false;
		var flag4 = false;
		$(function() {
			//文本框事件，失去焦点
			$("#username").blur(
					function() {
						//1验证用户输入的是否是空格
						if ($("#username").val() != ""
								|| $("#username").val().indexOf(" ") > 0) {
							//2保证输入的不是空格再调用ajaxName
							ajaxName();
						}
					});
		});
		function ajaxName() {
			$.ajax({
				//key:value
				url : "UsersServlet",
				type : "get",
				data : {
					username : $("#username").val(),
					op : "ajaxUsername"
				},
				success : function(data) {
					msg = data;
					console.log("data->msg:" + data.msg);
					if (data.msg == "notexists") {
						//得到页面上id为msg的span，并为其中添加内容
						$("#msg").html("该用户名可以使用。");
						flag1 = true;
					} else {
						$("#msg").html("该用户名已被使用，请更换！");
						flag1 = false;
					}
				},
				dataType : "json"
			});
		}
		/*********检测用户两次输入的密码是否一致*********/
		$(function() {
			//文本框事件，当密码输入框失去焦点时
			$("#userpsw").blur(function() {
				//1检测用户是否输入了确认密码，输入过确认密码才进行判断
				if ($("#conuserpsw").val() != "") {
					//如果两次输入密码一致
					if ($("#userpsw").val() == $("#conuserpsw").val()) {
						$("#userpswmsg").html("两次密码输入一致。");
						flag2 = true;
					} else {
						$("#userpswmsg").html("两次密码输入不一致。");
						flag2 = false;
					}
				}
			});
			//文本框事件，当确认密码输入框失去焦点时
			$("#conuserpsw").blur(function() {
				//1检测用户是否输入了密码，用户输入过了密码才进行判断
				if ($("#userpsw").val() != "") {
					if ($("#conuserpsw").val() == $("#userpsw").val()) {
						$("#userpswmsg").html("两次密码输入一致。");
						flag2 = true;
					} else {
						$("#userpswmsg").html("两次密码输入不一致。");
						flag2 = false;
					}
				}
			});
		});

		/*********手机号重复验证*********/
		$(function() {
			//文本框事件，失去焦点
			$("#userphone").blur(
					function() {
						//1验证用户输入的是否是空格
						if ($("#userphone").val() != ""
								|| $("#userphone").val().indexOf(" ") > 0) {
							//2保证输入的不是空格再调用ajaxPhone
							ajaxPhone();
						}
					});
		});
		// 验证手机号是否存在
		function ajaxPhone() {
			$.ajax({
				// key:value
				url : "UsersServlet",
				type : "post",
				data : {
					userphone : $("#userphone").val(),
					op : "ajaxPhone"
				},
				success : function(data) {
					if (data == true) {
						$("#userphonemsg").html("该手机号码已被注册!请更换手机号!");
						flag3 = false;
					} else {
						flag3 = true;
					}
				},
				dataType : "json"
			});
		}

		// 按钮发送短信的事件
		function sendMessage1() {
			curCount1 = count;
			var phone = $.trim($('#userphone').val());
			if (!phoneReg.test(phone)) {
				alert(" 请输入有效的手机号码");
				return false;
			}
			// 设置button效果，开始计时
			$("#btnSendCode1").attr("disabled", "true");
			$("#btnSendCode1").val(+curCount1 + "秒后再获取");
			InterValObj1 = window.setInterval(SetRemainTime1, 1000); // 启动计时器，1秒执行一次
			// 向后台发送处理数据
			ajaxCode();
		}

		// 发送并获取验证码
		function ajaxCode() {
			$.ajax({
				// key:value
				url : "UsersServlet",
				type : "post",
				data : {
					userphone : $("#userphone").val(),
					op : "ajaxSendmsg"
				},
				success : function(data) {
					scode = data;
				},
				dataType : "json"
			});
		}

		// 计时器
		function SetRemainTime1() {
			if (curCount1 == 0) {
				window.clearInterval(InterValObj1);// 停止计时器
				$("#btnSendCode1").removeAttr("disabled");// 启用按钮
				$("#btnSendCode1").val("重新发送");
			} else {
				curCount1--;
				$("#btnSendCode1").val(+curCount1 + "秒后再获取");
			}
		}
		$(function() {
			$("#scode").blur(function() {
				if (scode == null) {
					$("#codemsg").html("请先发送短信验证码");
					flag4 = false;
					console.log("请先发送短信验证码" + flag4);
				} else if (scode != $("#scode").val()) {
					$("#codemsg").html("短信验证码错误");
					flag4 = false;
					console.log("短信验证码错误" + flag4);
				} else {
					$("#codemsg").html("短信验证码正确");
					flag4 = true;
					console.log("短信验证码正确" + flag4);
				}
			});
		});

		function check() {
			// 点击增加按钮的时候，都要判断是否有重复的内容(类型重复)
			// 1 重复校验和判断
			var flag = flag1 && flag2 && flag3 && flag4;
			console.log(flag);
			return flag;
		}
	</script>


</body>
</html>
